<template>
  <div>


    <el-button footer="footer"  center="true" type="text" @click="tab">{{userInfos?userInfos.nickname:'登录'}}</el-button>

    <el-dialog v-if="dialogVisible" close  width="300px" :modal-append-to-body="false" :visible.sync="dialogVisible">
      <el-tabs stretch v-model="activeName" @tab-click="handleClick" :visible.sync="dialogVisible">
        <el-tab-pane stretch label="普通登录" name="first">
          <el-form  resetField :model="ruleForm" :rules="rules" ref="ruleForm"   class="demo-ruleForm">
              <el-input clearable  v-model="ruleForm.loginName" placeholder="请输入账号" class="input1" prefix-icon="el-icon-user"></el-input>
              <el-input  prefix-icon="el-icon-lock"  clearable show-password v-model="ruleForm.password"  placeholder="请输入密码"></el-input>
            <el-form-item>
              <el-button :plain="true" type="primary" @click="submitForm" class="loginBtn">登录</el-button>
            </el-form-item>
            <div class="btn">
              <span @click="myRegistration">立即注册</span>
              <span @click="myForgrt">忘记密码</span>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane stretch label="手机号登录" name="second" >
          <el-form  :model="ruleForm" :rules="rules" ref="ruleForm"  class="demo-ruleForm">
            <el-input  clearable v-model="ruleForm.mobile"  placeholder="请输入手机号" class="input1"  ></el-input>
            <el-input clearable v-model="ruleForm.text"  placeholder="请输入验证码" class="verificationCode"> </el-input>
            <el-button type="success" class="succes"  v-show="show" @click.prevent="getode()">验证码</el-button>
            <el-button type="success" class="succes" v-show="!show">{{count}}</el-button>


              <el-button :plain="true"  type="primary" @click="submitForm1" class="loginBtn" >登录</el-button>

          </el-form>
        </el-tab-pane>

      </el-tabs>
    </el-dialog>

    <Registration @closeRegistration="closeRegistration" :isRegistration="isRegistration"  @makeLoginShow="makeLoginShow"/>
    <ForgetThePassword @closeForgetThePassword="closeForgetThePassword" :isForgetThePassword="isForgetThePassword" @makeLogin="makeLogin" />
  </div>
</template>
<script>

import {getLogin, getPhone, getVerificationCode} from "@/api/user-api";
import Registration from "@/views/user/components/Registration";
import ForgetThePassword from "@/views/user/components/ForgetThePassword";
import {mapState} from "vuex";

export default {
  name:"Login",
  components:{
    ForgetThePassword,
    Registration
  },
  data() {
    return {
      //对话框
      dialogVisible: false,
      isRegistration:false,
      isForgetThePassword:false,
      activeName: 'first',//tab标签页
      show:true,//判断显示隐藏
      count:'',//倒计时
      //input 类型
      ruleForm:{
        loginName: '',
        password: '',
        mobile:'',
        text:'',
        nickname:'',
      },
      //正则
      rules: {

        loginName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { pattern:  /^[a-zA-Z0-9_]{4,16}$/ ,message: '请输入(4-16位数字字码下划线)用户名'}
        ],
        password: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { pattern:  /^[a-zA-Z0-9_-]{4,16}$/, message: '请输入(4-16位数字字码下划线)密码' }
        ],
        code:
            [
              {required: true, message: '目前只支持6位验证码', trigger: 'blur'},
              {pattern: /^\d{6}$/, message: '目前只支持6位验证码'}
            ],

      }
    }
  },
  methods: {
    tab(){
      this.dialogVisible=true;
    },
  //关闭注册
    closeRegistration(data){
      this.isRegistration = data;
    },
    //关闭忘记密码
    closeForgetThePassword(data){
      this.isRegistration=data;
    },
    //关闭注册
    myRegistration(){
      this.dialogVisible = false;
      this.isRegistration = true;
    },
  // 注册穿回来的参数
  makeLoginShow(data){
    this.dialogVisible=data.isShow
    this.isRegistration=data.isRegistration
  },
    //忘记密码
    myForgrt(){
      this.dialogVisible = false;
      this.isForgetThePassword = true;
    },
    //去登陆
    makeLogin(data){
      this.dialogVisible=data.isShows
      this.isForgetThePassword=data.isForgetThePassword
    },
    //tab切换
    handleClick(tab, event) {
      console.log(tab, event);
    },
  //账号密码登录
    submitForm() {
      getLogin(this.ruleForm.loginName,this.ruleForm.password,true).then(res=>{
        console.log(res)
        if(res.code ===0){
          this.$message({
            showClose: true,
            message: '恭喜你，登陆成功',
            type: 'success'
          })
          this.dialogVisible=false
          this.$store.commit('changeUserInfo',{userInfos:res.userInfo});
          this.$router.push({path:'/'})

        }else{
          this.$message({
            showClose: true,
            message: '登陆失败，请重新登陆',
            type: 'error'
          });
        }
      })

    },

    //手机号登录
    submitForm1(){

      console.log(this.ruleForm.mobile)
      console.log(this.ruleForm.text)
      getPhone(this.ruleForm.mobile,this.ruleForm.text).then(res=>{
        console.log(res)
        if(res.code===0){
          this.$message({
            showClose: true,
            message: '恭喜你，登陆成功',
            type: 'success'
          });
          this.$router.push({path:'IndexTitle'})
        }
      })
    },
    getode(){
      //获取验证码
      getVerificationCode(this.ruleForm.mobile).then(res=>{
        console.log(res)

      })
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {

          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    },


  },
  computed:{
    ...mapState(["userInfos"])
  }

}
</script>
<style scoped lang="less">
//input第一个下边距
.input1 {
  margin-bottom: 20px;
}
//
/deep/ .el-dialog {
  width: 42%;
}

//确定
/deep/.el-button--primary{
  text-align: center;
  width: 260px;
  margin-top: 5px;
  background-color: #00cf8c;
}
/deep/.el-button--primary:active{
  background-color: #00cf8c;
}
//验证码的宽
/deep/.verificationCode{
  width: 60%;

}
//去掉顶部padding
/deep/.el-dialog__header{
  padding: 0;
}
//立即注册  忘记密码

.btn{
  display: flex;
  justify-content: space-between;
  color: #999;
  cursor: pointer;
  margin-top: -10px;

}
//.btn span:nth-of-type(1):hover{
//  color: #00cf8c;
//
//}
//.btn span:nth-of-type(2):hover{
//    color: #00cf8c;
//
//}
.succes{
  background-color: #00cf8c;
  margin-left: 20px;
  cursor: pointer;
}
.el-button--text{
  color: #999;
}
.el-button--primary.is-plain{
  background-color: #00cf8c;
  color: white;
}
/deep/.el-button--primary.is-plain{
  background-color: #00cf8c;
  color: white;
}
/deep/.el-button--primary.is-plain:hover{
  color: white;
  background-color: #23db9b
}
</style>